<template>
  <div :class="bem()">
    <div :class="bem('body')">
      <router-view>
        <template #default="{ Component, route }">
          <transition name="fade" mode="out-in" appear>
            <keep-alive v-if="isOpenComponentCache" :include="cacheComponentNames">
              <component :is="Component" :key="route.fullPath" />
            </keep-alive>
            <div v-else :key="route.name">
              <component :is="Component" :key="route.fullPath" />
            </div>
          </transition>
        </template>
      </router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "LayoutPage"
}
</script>

<script setup>
import {createBEM} from "/@/utils/bem";
import {isOpenComponentCache} from "/@/config";
import {useCacheStore} from "/@/store/modules/cache";
import {storeToRefs} from "pinia";
const [bem] = createBEM('page');
const {noCacheComponentNames,cacheComponentNames} = storeToRefs(useCacheStore());
</script>

<style lang="less" scoped>

@prefix-cls: ~'@{namespace}-page';

.@{prefix-cls} {
  min-width: @layout-main-width;
  width: 100%;
  min-height: 970px;
  &__body {
    width: @layout-main-width;
    margin: 0 auto;
    height: 100%;
  }
}

</style>
